<template>
  <el-card style="width:100%;">
    <h2>关于</h2>
    <p class="content">{{ content }}</p>
    <h2>技术栈</h2>
    <ul class="space-4">
      <li>vue3</li>
      <li>element-plus</li>
      <li>pinia</li>
      <li>axios</li>
      <li>echarts</li>
    </ul>
    <h2>参与人员</h2>
    <el-descriptions>
      <template class="wrapper" v-for="item in authorList" :key="item.name">
        <el-descriptions-item :label="item.name">
          {{ item.remark }}
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <!-- <template>
      <el-descriptions title="111" v-for="item in authorList">
          {{item}}
          <el-descriptions-item label="负责">项目架构</el-descriptions-item>
        </el-descriptions>
    </template> -->
  </el-card>
</template>


<script setup>
import { ref, onMounted, reactive } from "vue";
const content = ref(null);
let authorList = ref([
  {
    name: "卢振方",
    remark: "后端架构，前端开发，项目组织",
  },
  {
    name: "宫志煜",
    remark: "前端核心功能开发",
  },
  {
    name: "栗雨微",
    remark: "前端核心功能开发",
  },
  {
    name: "孙慧慧",
    remark: "UI设计 + 前端开发",
  },
  {
    name: "崔鑫海",
    remark: "项目策划 + 前端开发",
  },
]);

onMounted(() => {
  content.value = `本项目为2022年课设《青春同同学录》前端项目`;
});
</script>

<style scoped>
* {
  margin: 10px;
}
.content {
  font-size: 20px;
  font-weight: bolder;
  padding: 20px;
}
.space-4 {
  margin-left: 40px;
}
h2{ 
    margin: 20px 0;
}
</style>